<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>ECharts</title>
  <!-- 引入刚刚下载的 ECharts 文件 -->
  <script src="{{cwd}}js/echarts.min.js"></script>
</head>

<body>
  <h1 style="color: #474747;text-align: center;">咸鱼插件统计</h1>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <h3 style="text-align: center;">过去24小时使用统计</h3>
  <div id="main" style="width: 800px;height:400px;"></div>
  <!-- <div id="main1" style="width: 800px;height:400px;"></div> -->
  <p style="text-align: center;">xianyu-plugin</p>
  <script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // var myChart1 = echarts.init(document.getElementById('main1'));

    // 指定图表的配置项和数据
    var option = "{{option}}"
    option = option.replace(/&#34;/g, '"')
    let data = JSON.parse(option)
    myChart.setOption(data)

    // var option1 = {
    //   title: {
    //     text: '近24小时内用户活跃人数'
    //   },
    //   tooltip: {
    //     trigger: 'axis'
    //   },
    //   grid: {
    //     left: '3%',
    //     right: '4%',
    //     bottom: '3%',
    //     containLabel: true
    //   },
    //   legend: {
    //   },
    //   xAxis: {
    //     type: 'category',
    //     boundaryGap: false,
    //     data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] // 时间
    //   },
    //   yAxis: {

    //   },
    //   series: [
    //     {
    //       name: 'trss_yunzai',
    //       type: 'line',
    //       data: [5, 20, 36, 13, 54, 32, 12, 4, 34, 56],
    //       markPoint: {
    //         data: [
    //           { type: 'max', name: 'Max' },
    //           { type: 'min', name: 'Min' },
    //         ]
    //       },
    //     },
    //     {
    //       name: 'miao_yunzai',
    //       type: 'line',
    //       data: [1, 2, 34, 34, 53, 23, 56, 43, 12, 43],
    //       markPoint: {
    //         data: [
    //           { type: 'max', name: 'Max' },
    //           { type: 'min', name: 'Min' },
    //         ]
    //       },
    //     }
    //   ]
    // };

    // // 列出从当前时间开始的24小时内的时间，每个小时的时间区间
    // let time = new Date().getTime()
    // let timeArr = []
    // for (let i = 1; i < 25; i++) {
    //   timeArr.push(time - i * 3600 * 1000)
    // }
    // let serie = []
    // let datas = {}
    // let sum = 0


    // // 遍历时间
    // for (const i in timeArr) {
    //   // 当前时间段数据
    //   let values = {}
    //   // 获取数据
    //   fetch(`https://xy.suancaixianyu.cn/xyapi/rank/count?plugin=xianyu-plugin&end=${timeArr[i] + 1 * 3600 * 1000}&start=${timeArr[i]}`)
    //     .then(res => res.json())
    //     .then(res => {
    //       sum++
    //       console.log(res, res.code == 200);

    //       if (res.code == 200) {
    //         // data有数据
    //         // 遍历bot
    //         if (Object.keys(res.data).length == 0) return
    //         console.log(res.data);
    //         for (const j in res.data) {
    //           let bot = res.data[j]
    //           console.log('bot', bot)
    //           delete bot.sum
    //           // 遍历plugin

    //           for (const plugin in bot) {
    //             if (bot.hasOwnProperty(plugin)) {
    //               const el_plugin = bot[plugin];
    //               // 遍历app
    //               for (const app in el_plugin) {
    //                 console.log('app', app);
    //                 // 累加
    //                 const el_app = el_plugin[app];
    //                 console.log('el_app', el_app);

    //                 if (!values[app])
    //                   values[app] = el_app
    //                 else
    //                   values[app] += el_app
    //               }
    //             }
    //           }
    //         }

    //         // 添加到serie
    //         datas[i] = values
    //         console.log(datas);
    //       }
    //     })
    // }

    // // 定时器
    // const intervalId = setInterval(function () {
    //   if (sum == 24) {
    //     // 结束循环
    //     clearTimeout(intervalId);
    //     const result = {};
    //     // 提取所有可能的 key
    //     const allKeys = new Set();
    //     for (const key in datas) {
    //       if (datas.hasOwnProperty(key)) {
    //         for (const subKey in datas[key]) {
    //           if (datas[key].hasOwnProperty(subKey)) {
    //             allKeys.add(subKey);
    //           }
    //         }
    //       }
    //     }

    //     // 将 Set 转换为数组
    //     const keys = Array.from(allKeys);

    //     // 遍历从 0 到 23 的数字
    //     for (let i = 0; i <= 23; i++) {
    //       result[i] = {};
    //       for (const key of keys) {
    //         result[i][key] = datas[i] ? (datas[i][key] || 0) : 0;
    //       }
    //     }
    //     console.log('result', result);
    //     for (const key in result) {
    //       let el = result[key]
    //       option.xAxis.data.push(new Date(timeArr[key]).getHours() + 1)
    //       for (const k in el) {
    //         if (el.hasOwnProperty(k)) {
    //           const element = el[k];
    //           if (option.series.findIndex(e => e.name == k) == -1) {
    //             option.series.push({
    //               name: k,
    //               type: 'line',
    //               data: [],
    //               markPoint: {
    //                 data: [
    //                   { type: 'max', name: 'Max' },
    //                 ]
    //               },
    //             })
    //           }
    //           option.series.find(e => e.name == k).data.push(element)
    //         }
    //       }

    //     }
    //     // 将option.series.data倒序
    //     for (const key in option.series) {
    //       if (option.series.hasOwnProperty(key)) {
    //         const element = option.series[key];
    //         element.data = element.data.reverse()
    //       }
    //     }
    //     option.xAxis.data = option.xAxis.data.reverse()
    //     // 使用刚指定的配置项和数据显示图表。
    //     myChart.setOption(option);
    //     // myChart1.setOption(option1);

    //   } else {
    //     console.log('sum', sum);
    //   }
    // }, 1000);
  </script>
</body>

</html>